<template>
  <div class="headDiv">
    <div style="float: left;width: 80%">
      <el-menu :default-active="activeIndex2" class="el-menu-demo menu" mode="horizontal"
               @select="handleSelect" background-color="#3d444c"
               text-color="#fff" active-text-color="#FFFFFF">
        <el-menu-item index="1" style="margin-left:5%">
          <router-link :to='{name:"HomePath"}'>首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link :to='{name:"GeneralPath"}'>综合训练</router-link>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">专项训练</template>
          <el-menu-item index="3-1">
            <router-link :to='{name:"SubjectPath",params:{id:1}}'>
              <span style="weight:100%;">java基础</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-2">
            <router-link :to='{name:"SubjectPath",params:{id:2}}'>
              <span style="weight:100%;">数据库</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-3">
            <router-link :to='{name:"SubjectPath",params:{id:3}}'>
              <span style="weight:100%;">Html网页设计</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-4">
            <router-link :to='{name:"SubjectPath",params:{id:4}}'>
              <span style="weight:100%;">python</span>
            </router-link>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="4">
          <router-link :to='{name:"ForumPath"}'>经验交流</router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <router-link :to='{name:"MyPath"}'>个人中心</router-link>
        </el-menu-item>
        <!--<el-menu-item index="6" disabled>-->
        <!--<router-link :to='{name:"LoginPath"}'>登录</router-link>-->
        <!--</el-menu-item>-->
        <!--<el-menu-item index="6">-->
        <!--<router-link :to='{name:"LoginPath"}'>guoshuai</router-link>-->
        <!--</el-menu-item>-->
      </el-menu>
    </div>
    <div style="" v-if="getUser">
      <router-link :to='{name:"LoginPath"}'><span
        style="color: #ffffff;line-height: 56px;float:right;margin-right: 50px">登录</span></router-link>
    </div>
    <div style="" v-if="!getUser">
      <span
        style="color: #ffffff;line-height: 56px;float:right;margin-right: 50px" @click="loginOut()"><a>退出</a>
      </span>
    </div>
    <!--<div style="float:right;weight:20%;background-color: #5daf34">sfsdf</div>-->
  </div>
</template>

<script>
  import {getToken, setToken, removeToken} from '@/utils/auth'

  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      },
      loginOut() {
        this.$store.commit('loginout');
        this.$message("退出成功")
      }
    },
    computed: {
      getUser() {
        let username = this.$store.state.username;
        return username == ''
      }
    }
  };
</script>
<style>
  .headDiv {
    /*width: 100%;*/
    height: 61px;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #3d444c;
  }

  .auth {
    color: #ffffff;
    margin-top: 20px;
    /*line-height: 4;*/
    margin-left: 50px;
  }
</style>
